<template>
    <div>
        <div v-for="(item, index) in phonepagedata" :key="index">
            <div v-html="item.div ? item.div : ''" @click="clickedit(item, index)"></div>
            <component
                :is="item.component"
                v-if="item.component ? true : false"
                :customtext="item.customtext"
                :lunbotu="item.swiperimg"
                :dantu="item.dantuimg"
                :gonggao="item.gonggaotext"
                :eyegzh="item.eyegzhtext"
                :tuwennav="item.tuwennavimg"
                :youhuinav="item.youhuinavimg"
                :category="item.categorydata"
                :courselist="item.courselist"
                :prevent="false"
            >
            </component>
        </div>
        <div style="text-align:center;font-size:14px;color:#6D737A;margin-top:7px">
            <div class="sydb">
                <span>店铺主页</span>
                <span>|</span>
                <span @click="tomy()">个人中心</span>
                <span>|</span>
                <span>投诉建议</span>
            </div>
            <div >知了提供技术支持</div>
            <div style="margin-top:7px">www.</div>  
        </div>
        <van-dialog v-model="show" :title="title" :closeOnClickOverlay='true'>
            <div></div>
            <img style="width: 100%" :src="img_url" />
        </van-dialog>
        <van-dialog v-model="coupon_shop"  @closed="ces()" class="yhqlog" style="overflow: visible">
            <div class="yhq" v-for="(item, index) in coupon_list" :key="index">
                <div class="yhq_left">
                    <div>
                        {{ item.menkan_price > 0 ? '满' + item.menkan_price + '减' + item.jian_price : '减' + item.jian_price }}
                    </div>
                    <div style="margin-top: 5px">
                        {{ item.menkan_price > 0 ? ' 满减卷' : '无门槛卷' }}
                    </div>
                </div>
                <div style="margin-left: 15px">
                    <div class="yhq_btn" @click="toticket()">点击查看</div>
                    <p style="margin-top: 2px; font-size: 12px">1天内有效</p>
                </div>
            </div>
            <div class="shut" @click="shutick()">关闭</div>
        </van-dialog>
        <div style="height: 50px"></div>
        <!--方便全屏显示-->
        <xjmenubar :menubar="tabbar" :prevent="false" :cactive="cactive"></xjmenubar>
    </div>
</template>

<script>
import Vue from 'vue';
import { Dialog } from 'vant';
import xjsearch from '@/components/shop/xjsearch.vue';
import xjcustomtext from '@/components/shop/xjcustomtext.vue';
import xjlunbotu from '@/components/shop/xjlunbotu.vue';
import xjdantu from '@/components/shop/xjdantu.vue';
import xjgonggao from '@/components/shop/xjgonggao.vue';
import xjeyegzh from '@/components/shop/xjeyegzh.vue';
import xjtuwennav from '@/components/shop/xjtuwennav.vue';
import xjyouhuinav from '@/components/shop/xjyouhuinav.vue';
import xjmenubar from '@/components/shop/xjmenubar.vue';
import xjcategory from '@/components/shop/xjcategory.vue';
import xjuserservice from '@/components/shop/xjuserservice.vue';
import xjcourselist from '@/components/shop/xjcourselist.vue';
export default {
    components: {
        xjsearch,
        xjcustomtext,
        xjlunbotu,
        xjdantu,
        xjgonggao,
        xjeyegzh,
        xjtuwennav,
        xjmenubar,
        xjcategory,
        xjuserservice,
        xjyouhuinav,
        xjcourselist,
        [Dialog.Component.name]: Dialog.Component
    },
    data() {
        return {
            couponid:[],
            popads:"",
            coupon_list: [],
            coupon_shop: false,
            title: '',
            img_url: '',
            show: false,
            phonepagedata: '',
            tabbar: '',
            cactive: 0
        };
    },
    methods: {
        tomy() {
            this.$router.push({ name: 'my' });
        },
        toticket(){
            this.$router.push({ name: 'coupon' });
        },
        async shutick() {
			// console.log(this.couponid)
            let res = await this.$frontaxios.post(this.$front.couponPopRecode,{couponid:this.couponid});
            // console.log(res)
            this.coupon_shop = false;
        },
        async ces() {
            let res = await this.$frontaxios.post(this.$front.popRecode,{ad_id:this.popads});
            // console.log(1111);
			// console.log(res);
			// console.log(22222);
        },
        async dialogaotu() {
            let res = await this.$frontaxios.post(this.$front.api_loadPopAds);
            console.log(res);
            if (res.code == 1) {
                this.title = res.data[0].name;
                this.img_url = res.data[0].img_url;
                this.popads=res.data[0].id
                this.show = true;
            }
            // Dialog.alert({
            //     title: '标题',
            //     message: '弹窗内容'
            // }).then(() => {
            //     // on close
            // });
        },
        async query() {
            let res = await this.$frontaxios.post(this.$front.getAllList);
            console.log(res);
            if (res.code == 1) {
                this.coupon_list = res.data;
                this.coupon_shop = true;
				let res_arr = Object.values(res.data);
				console.log(res_arr)
				  res_arr.map(item=>{
				      this.couponid.push(item.id)
				  })
                let res2 = await this.$frontaxios.post(this.$front.insertUserCoupon, { couponid:this.couponid });
            }
			
        },
        async getPhonePageData() {
            let res = await this.$frontaxios.post(this.$front.getPhonePageData);
            if (res.code == -2) {
                this.$notify({ type: 'warning', message: '请设置店铺首页，再过来查看' });
            } else if (res.code == 1) {
                this.phonepagedata = res.data.phonepagedata;
                console.log(res);
                this.tabbar = res.data.tabbar;
            } else if (res.code == -10) {
                this.$dialog.alert({ title: '温馨提示', message: '店铺使用期限已到，请购买后再来查看' });
            } else {
                this.$notify({ type: 'warning', message: res.msg });
            }
        }
    },
    created() {
        this.query();
        this.dialogaotu();
        this.getPhonePageData();
    }
    // computed: {
    // 	h:function(){//右边编辑组件显示位置调整
    // 	    //if手机
    // 		//ifipad
    // 		return {"height":630+'px'};
    // 	}
    // }
};
</script>

<style lang="scss" scoped>
.wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    background-color: #fff;
}

.block {
    width: 120px;
    height: 120px;
    background-color: #fff;
}
.yhqlog {
    background-color: red;
}
.yhq {
    display: flex;
    padding: 10px 5px;
    margin: 5px auto;
    width: 90%;
    background-color: #fff;
    border-radius: 10px;
    font-size: 14px;
}
.yhq_left {
    width: 60%;
    text-align: center;
    color: #ff882d;
}
.yhq_btn {
    padding: 2px;
    text-align: center;
    height: 20px;
    border-radius: 15px;
    background-color: #ff882d;
    color: #fff;
}
.shut {
    color: #fff;
    position: absolute;
    bottom: -23px;
    left: 138px;
}
::v-deep .van-dialog__footer {
    display: none !important;
}
.sydb{
    margin-bottom: 10px;
    span{
        margin:0 5px;
    }
}
</style>
